<template>
  <view class="page-content">
    <view class="pup-main">
      <view class="pup-service-list">
        <view
          class="pup-service-item"
          v-for="item in serviceProject.children"
          :key="item.name"
          @click="curNameId = item.id"
        >
          <view class="pup-service-item-icon">
            <uni-icons
              v-if="item.id == curNameId"
              type="checkbox-filled"
              color="#4cd964"
              size="24"
            ></uni-icons>
            <uni-icons
              v-else
              type="circle"
              color="#4cd964"
              size="24"
            ></uni-icons>
          </view>
          <view class="pup-service-item-right">
            <view class="pup-service-item-title"
              ><text class="pup-service-item-title-text">{{ item.name }}</text
              ><text class="pup-service-item-title-money"
                >（￥{{ item.value }}/天）</text
              ></view
            >
            <text class="pup-service-item-content"
              >服务内容：{{ item.remark }}</text
            >
          </view>
        </view>
      </view>
      <view class="predetermine-buttom-btn">
        <up-button
          type="primary"
          text="确定"
          @click="SubmitProject()"
        ></up-button>
      </view>
    </view>
  </view>
</template>
  
  <script setup>
import { onMounted, ref } from "vue";

import { CreateOrder } from "@/api/common.js";

const emits = defineEmits(["update:updateProjectName"]);

let serviceDay = ref(0);
const props = defineProps({
  isCurrent: {
    type: Number,
    default: 1,
  },
  list: {
    type: Array,
    default: () => [],
  },
  serveId: {
    type: Number,
    default: null,
  },
});

// 陪护项目
let nursingProject = ref();
//   [
//   {
//     id: 1,
//     name: "住院",
//     list: [
//       {
//         id: 1,
//         name: "轻症陪护",
//         money: 240,
//         content: "测量体温、血糖、血压，注射、换药",
//       },
//       {
//         id: 2,
//         name: "重症陪护",
//         money: 280,
//         content: "测量体温、血糖、血压，注射、换药",
//       },
//     ],
//   },
//   {
//     id: 2,
//     name: "居家",
//     list: [
//       {
//         id: 1,
//         name: "轻症陪护",
//         money: 240,
//         content: "饮食照顾、个人卫生、环境整理",
//       },
//       {
//         id: 2,
//         name: "重症陪护",
//         money: 280,
//         content: "饮食照顾、个人卫生、环境整理",
//       },
//     ],
//   },
// ]

let serviceProject = ref({});

let curNameId = ref();

let titleServeName = ref("");
const SubmitProject = () => {
  let item = serviceProject.value.children.find((o) => o.id == curNameId.value);
  titleServeName.value = item.name;
  console.log(item, "item");
  emits("update:updateProjectName", item);
};

onMounted(() => {
  nursingProject.value = props.list;
  serviceProject.value = props.list.find((o) => o.id == props.isCurrent);
  curNameId.value = props.serveId
    ? props.serveId
    : serviceProject.value.children[0].id;
  console.log(
    serviceProject.value,
    "serviceProject",
    props.isCurrent,
    props.serveId,
    curNameId.velue
  );
});
</script>
  
  <style scoped lang="scss">
.predetermine-tab-item {
  background: #f3fefb;
  color: #1dcb91;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 32rpx;
  text-align: center;
  width: 50%;
}
.predetermine-tab-item-current {
  background: #1dcb91;
  color: #fff;
}
.predetermine-tab {
  display: flex;
  width: 100%;
  border-radius: 12rpx 12rpx 0 0;
  overflow: hidden;
}
.predetermine-check {
  padding: 20rpx;
}

.predetermine-check-title {
  font-size: 28rpx;
  color: #999;
  line-height: 1;
  margin: 20rpx 0;
}
.predetermine-check {
  background: #ffffff;
  padding: 20rpx;
  border-radius: 0 0 16rpx 16rpx;
}

.predetermine-check-main {
  background: #f3fefb;
  padding: 10rpx 30rpx;
  border-radius: 16rpx;
  overflow: hidden;
}
.predetermine-check-content {
  background: #f3fefb;
  border-radius: 16rpx;
  overflow: hidden;
  ::v-deep .u-input {
    padding: 26rpx 30rpx !important;
  }
}

.predetermine-title {
  font-weight: bold;
  margin-bottom: 10rpx;
  color: #1dcb91;
}

.predetermine-time {
  padding: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  margin-top: 20rpx;
}
.u-textarea {
  border: none;
  background: #f3fefb !important;
}
.predetermine-buttom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 99;
}
.predetermine-buttom-btn {
  padding: 20rpx;
}

.pup-main {
  padding: 40rpx;
  .predetermine-buttom-btn {
    padding: 20rpx 0;
  }
}

.pup-service-item {
  display: flex;
  margin-bottom: 36rpx;
  .pup-service-item-title {
    width: 100%;
  }
  .pup-service-item-title-text {
    font-size: 36rpx;
  }
  .pup-service-item-title-money {
    color: #f00;
  }
  .pup-service-item-content {
    color: #999;
    font-size: 28rpx;
    margin-top: 30rpx;
  }
  .pup-service-item-right {
    margin-left: 10rpx;
  }
}
</style>
  